<template>
  <div class="map" :style="bStyle">
    <div id="r-result">
      请输入地址:<input
        type="text"
        id="suggestId"
        size="20"
        style="width: 300px"
        v-model="keyMap"
      />
    </div>
    <div
      id="searchResultPanel"
      style="
        border: 1px solid #c0c0c0;
        width: 150px;
        height: auto;
        display: none;
      "
    ></div>
    <div id="l-map"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      keyMap : ''
    };
  },
  props: {
    bLeft: {
      type: String,
    },
    bWidth: {
      type: String,
    },
  },
  computed: {
    bStyle() {
      return {
        marginLeft: this.bLeft,
        width: this.bWidth,
      };
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    setAddress(rs) {
      this.keyMap = rs.address
      let mapInfo = {
        userInputAddress: rs.address,
        address: rs.address,
        city: rs.addressComponents.city, //市
        title: rs.address,
        pointLng: rs.point.lng,
        pointLat: rs.point.lat,
        province: rs.addressComponents.province, //省
      };
       this.$emit("submitMap", mapInfo);
    },
    init() {
      let _self = this;
      function G(id) {
        return document.getElementById(id);
      }
      var map = new BMapGL.Map("l-map");
      map.centerAndZoom("北京", 12); // 初始化地图,设置城市和地图级别。
      let scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
      map.addControl(scaleCtrl);
      map.enableScrollWheelZoom(true);
      var geolocation = new BMapGL.Geolocation();
      var geoc = new BMapGL.Geocoder();
      geolocation.getCurrentPosition(
        function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMapGL.Marker(r.point, {
              enableDragging: true,
            });
            mk.addEventListener("onmouseup", function () {
              geoc.getLocation(mk.getPosition(), _self.setAddress);
              map.panTo(mk.getPosition());
            });
            map.addOverlay(mk);
            map.panTo(r.point);
          } else {
            alert("获取地址失败，请手动输入地址，没有权限" + this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
      var ac = new BMapGL.Autocomplete({ input: "suggestId", location: map }); //建立一个自动完成的对象
      ac.addEventListener("onhighlight", function (e) {
        //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str =
          "FromItem<br />index = " +
          e.fromitem.index +
          "<br />value = " +
          value;
        value = "";
        if (e.toitem.index > -1) {
          _value = e.toitem.value;
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str +=
          "<br />ToItem<br />index = " +
          e.toitem.index +
          "<br />value = " +
          value;
        G("searchResultPanel").innerHTML = str;
      });
      var myValue;
      ac.addEventListener("onconfirm", function (e) {
        //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
        G("searchResultPanel").innerHTML =
          "onconfirm<br />index = " +
          e.item.index +
          "<br />myValue = " +
          myValue;
        setPlace();
      });
      function setPlace() {
        map.clearOverlays(); //清除地图上所有覆盖物
        function myFun() {
          console.log(local.getResults())
          var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
          map.centerAndZoom(pp, 18);
          //console.log(local.getResults().getPoi(0))
          let result = local.getResults().getPoi(0);
          var mk1 = new BMapGL.Marker(pp, {
            enableDragging: true,
          });
          mk1.addEventListener("onmouseup", function () {
            geoc.getLocation(mk1.getPosition(), _self.setAddress);
            map.panTo(mk1.getPosition());
          });
          map.addOverlay(mk1);
          //添加标注
          let mapInfo = {
            userInputAddress: myValue,
            address: result.address,
            city: result.city, //市
            title: result.title,
            pointLng: result.point.lng,
            pointLat: result.point.lat,
            province: result.province, //省
          };
          _self.$emit("submitMap", mapInfo);
        }
        var local = new BMapGL.LocalSearch(map, {
          //智能搜索
          onSearchComplete: myFun,
        });
        local.search(myValue);
        //_self.$emit('submitMap',_self.mapValue)
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.map {
  width: 100%;
  //   border: 1px solid red;
  #l-map {
    height: 300px;
    width: 100%;
    // border: 1px solid green;
    position: relative;
    top: 0px;
  }
  #r-result {
    width: 100%;
    // border: 1px solid blue;
  }
  #qq {
    border: 1px solid #c0c0c0;
    width: 150px;
    height: 20;
    max-height: 300px;
    position: relative;
    left: 8%;
    top: 0px;
    z-index: 999;
    background-color: #fff;
  }
}
</style>